<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option">
    </m-crud>
  </m-page-wrapper>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
const crudRef = ref()
const option = ref<CrudType>({
  // 弹窗类型
  // dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%'
  },
  // 表单属性
  formProps: {
    labelWidth: '100px',
    // labelCol: { flex: '100px' },
  },
  // 标题
  // title: '配置',
  title: '用户',
  // 列表接口
  api: '/Users/GetUser',
  // 添加保存接口
  saveApi: '/Users/CreateUser',
  // 添加保存接口
  updateApi: '/Users/EditUser',
  // 删除接口
  delApi: '/Users/DeleteUser',
  // 添加的权限码
  addPerms: 'sys:config:save',
  // 修改的权限码
  editPerms: 'sys:config:update',
  // 查看的权限码
  viewPerms: 'sys:config:detail',
  // 删除的权限码
  delPerms: 'sys:config:remove',
  columns: [
    {
      title: '用户ID',
      dataIndex: 'userID',
      key: 'userID',
      list: false,
      view: true,
      add: false,
      edit: true,
      component: 'Input',
      componentProps: {
        type: "hidden",
        maxlength: 20,
      },
      rules: [{ required: false, message: '请输入配置ID', trigger: 'blur' }]
    },
    {
      title: '用户名',
      dataIndex: 'userName',      
      key: 'userName',
      search: true,
      searchType: "EQ",
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入配置名称', trigger: 'blur' }]
    },
    {
      title: '所属组织',
      dataIndex: 'organizational',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'DefTreeSelect',
      componentProps: {
        api: '/Organizationals/GetOrgList',
        params: {"OrgID": 0}
      },
    },
    {
      title: '所属角色',
      dataIndex: 'role',
      list: true,
      view: true,
      add: true,
      edit: true,
      // component: 'Dict',
      // componentProps: {
      //   code: "sys_role_role_type",
      //   placeholder: '请选择类型',
      // }
      component: 'DefTreeSelect',
      componentProps: {
        api: '/Roles/GetRoleList',
      },
      
      // component: 'ApiSelect',
      // componentProps: {
      //   api: '/sys/role/select',
      // },
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
    },
    {
      title: '密码',
      dataIndex: 'passWord',
      list: false,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      title: '性别',
      dataIndex: 'sex',
      width: '10%',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Dict',
      componentProps: {
        code: "sys_sex_type",
        placeholder: '请选择性别',
      },
      rules: [{ required: true, message: '请输入性别', trigger: 'blur' }]
      // component: 'ApiDict',
      // componentProps: {
      //   code: 'sex',
      // },
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入邮箱名称', trigger: 'blur' }]
    },

    // {
    //   title: '创建用户',
    //   dataIndex: 'createUser',
    //   key: 'createUser',
    //   list: true,
    //   view: true,
    //   add: false,
    //   edit: false,
    //   component: 'Input',
    //   componentProps: {
    //     type: "text",
    //   },
    //   rules: [{ required: false, message: '请输入创建用户', trigger: 'blur' }]
    // },
    // {
    //   title: '更新时间',
    //   dataIndex: 'updateTime',
    //   key: 'updateTime',
    //   list: false,
    //   view: false,
    //   add: false,
    //   edit: false,
    //   component: 'DatePicker',
    //   componentProps: {
    //     valueFormat: "YYYY-MM-DD",
    //     mode: "date",
    //     format: "YYYY-MM-DD",
    //   },
    //   rules: [{ required: false, message: '请输入更新时间', trigger: 'blur' }]
    // },
    // {
    //   title: '更新用户',
    //   dataIndex: 'updateUser',
    //   key: 'updateUser',
    //   list: false,
    //   view: false,
    //   add: false,
    //   edit: false,
    //   component: 'Input',
    //   componentProps: {
    //     type: "text",
    //   },
    //   rules: [{ required: false, message: '请输入更新用户', trigger: 'blur' }]
    // },
    // {
    //   title: '是否删除',
    //   dataIndex: 'isDeleted',
    //   key: 'isDeleted',
    //   list: false,
    //   view: false,
    //   add: false,
    //   edit: false,
    //   component: 'Input',
    //   componentProps: {
    //     type: "text",
    //   },
    //   rules: [{ required: false, message: '请输入是否删除', trigger: 'blur' }]
    // },
  ]
  ,
})
</script>

<style lang="less" scoped></style>